<template>

	<view>

		<u-line-progress :percentage="jindu" activeColor="#ff0000"></u-line-progress>
		<u-divider text="第一步,选择预约日期"></u-divider>
		<u--text mode="date" size="20" align="center" :text="value1" @click="show1 = true"></u--text>
		<u--text mode="text" size="20" align="center" :text="value2"></u--text>
		<u-datetime-picker ref="datetimePicker" :show="show1" :minDate="minDate" :maxDate="maxDate" v-model="value1"
			mode="date" :formatter="formatter" @cancel="show1=false" @confirm="confirm1">
		</u-datetime-picker>
		<u-divider text="第二步,请选择自习室"></u-divider>
		<u-button @click="selectRooms" type="success" shape="circle" :text="chooseRoom"></u-button>
		<u-divider text="第三步,请选择座位"></u-divider>
		<u-button @click="selectDev" type="primary" shape="circle" :text="chooseDev"></u-button>
		<u-divider text="第四步,请选择预约时间"></u-divider>
		<u-button type="success" shape="circle" @click="show2 = true" :text="chooseTime"></u-button>
		<u-divider text="已完成,待确认"></u-divider>
		<u-button type="primary" shape="circle" text="确定" @click="requestToAliyun"></u-button>
		<u-toast ref="uToast" :closable="closable" />
		<!-- <u-alert :title="title" type="warning" :closable="closable" :description="description"></u-alert> -->

		<u-picker :show="show2" :columns="columns" @cancel="show2=false" @confirm="confirm2"></u-picker>
		<u-picker :show="show3" :columns="columns3" @confirm="confirm3" @cancel="show3=false"></u-picker>
		<u-picker :show="show4" :columns="columns4" @confirm="confirm4" @cancel="show4=false"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: new Date().getTime(),
				// value1:'点击选择预约日期',
				value2: '时间',
				requestHourTime: 0,
				roomId: 0,
				userId: 1,
				devId: 0,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				closable: false,
				jindu: 0,
				minDate: parseInt(new Date().getTime()),
				maxDate: parseInt(new Date().getTime()) + 604800000,
				mode: 'multiple',
				columns: [
					['请选择自习室']
				],
				columns3: [
					[]
				],
				columns4: [
					['请选择自习室 ']
				],
				chooseRoom:'选择自习室',
				chooseDev:'选择座位',
				chooseTime:'请选择预约时间',
				
			}
		},
		methods: {
			confirm1(e) {
				// console.log(e);
				this.value1 = e.value
				// const timeFormat = uni.$u.timeFormat;
				// this.value1Str=timeFormat(e.value, 'yyyy-mm-dd');
				this.show1 = false
				console.log(this.value1)
				this.jindu = 25;
			},
			confirm2(e) {
				console.log('confirm', e.value[0])
				this.value2 = e.value[0];
				var index = e.value[0].indexOf(':')
				this.requestHourTime = (e.value[0].substring(0, index))
				this.show2 = false
				this.jindu = 100;
				this.chooseTime=e.value[0];
			},
			// 回调参数为包含columnIndex、value、values
			confirm3(e) {
				console.log('confirm', e)
				this.roomId = e.value[0].substring(0, e.value[0].indexOf('-'));
				this.show3 = false
				uni.request({
					url: 'http://119.23.64.16:8080/device/getListByRoomId', //仅为示例，并非真实接口地址。
					data: {
						roomId: this.roomId
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						var arr = new Array();
						arr[0] = new Array();
						for (var i = 0; i < res.data.data.length; i++) {
							arr[0][i] = res.data.data[i].id + "-" + res.data.data[i].devLocation + '温度：' + res
								.data.data[i].temperature + ' 湿度:' + res.data.data[i].humidity
						}
						this.columns4 = arr;
						console.log(this.columns4)
					}
				});
				this.jindu = 50;
				this.chooseRoom=e.value[0];
			},
			confirm4(e) {
				this.show4 = false;
				this.devId = e.value[0].substring(0, e.value[0].indexOf('-'))
				uni.request({
					url: 'http://119.23.64.16:8080/schedule/getAvailableHour', //仅为示例，并非真实接口地址。
					data: {
						devId: this.devId,
						date: this.value1
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {

						for (var i = 0; i < res.data.data[0].length; i++) {
							res.data.data[0][i] = res.data.data[0][i] + ":00 - " + (res.data.data[0][i] + 1) +
								":00"
						}
						this.columns = res.data.data
						this.text = 'request success';

					}
				});
				this.jindu = 75;
				this.chooseDev=e.value[0];
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'minute') {
					return '00'
				}
				return value
			},
			requestToAliyun() {

				uni.request({
					url: 'http://119.23.64.16:8080/schedule/reverse', //仅为示例，并非真实接口地址。
					//url: 'http://127.0.0.1:8082/schedule/reverse',
					data: {
						userId: '1',
						date: this.value1,
						hourTime: this.requestHourTime,
						roomId: this.roomId,
						devId: this.devId
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						this.text = 'request success';
						var that = this;
						if (res.data.status == 200) {
							// this.$refs.uToast.success("success")
							uni.showModal({
								title: '提示',
								content: '已预约成功，还需要预约请重复该操作',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// that.$router.go(0)
										// location.reload()
										uni.navigateBack({
											delta: 1
										});
									}
								},
							});
						} else {
							this.$refs.uToast.error(res.data.msg)
						}
					}
				});
			},
			selectRooms() {
				this.show3 = true;
			},
			selectDev() {
				this.show4 = true;

			},
		},
		mounted() {
			uni.request({
				url: 'http://119.23.64.16:8080/room/getAllRooms', //仅为示例，并非真实接口地址。
				//url: 'http://127.0.0.1:8082/room/getAllRooms',
				data: {},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					var arr = new Array();
					arr[0] = new Array();
					for (var i = 0; i < res.data.data.length; i++) {
						arr[0][i] = res.data.data[i].id + "-" + res.data.data[i].name
					}
					this.columns3 = arr;
					console.log(this.columns3)
				}
			});
		}
	}
</script>
